import { InfoCircleOutlined } from '@ant-design/icons';
import { Card, Col, Row, Table, Tooltip, Select } from 'antd';
import { TinyArea, Column  } from '@ant-design/charts';
import React from 'react';
import numeral from 'numeral';
import NumberInfo from './NumberInfo';
import Trend from './Trend';
import styles from '../style.less';
const { Option } = Select;
const columnsData = [
  {
    type: '一年级一班',
    sales: 38,
  },
  {
    type: '一年级二班',
    sales: 52,
  },
  {
    type: '一年级三班',
    sales: 61,
  },
  {
    type: '一年级四班',
    sales: 145,
  },
  {
    type: '一年级五班',
    sales: 48,
  },
  {
    type: '一年级六班',
    sales: 38,
  },
];  

let config = {
  data: columnsData,
  xField: 'type',
  yField: 'sales',
  label: {
    position: 'middle',
    style: {
      fill: '#FFFFFF',
      opacity: 0.6,
    },
  },
  xAxis: {
    label: {
      autoHide: true,
      autoRotate: false,
    },
  },
  meta: {
    type: { alias: '类别' },
    sales: { alias: '请假人数' },
  },
};

function handleChange(value) {
  console.log(`selected ${value}`);
}

const TopSearch = ({ loading, visitData2, searchData, dropdownGroup }) => (
  <Card
    loading={loading}
    className={styles.salesCard}
    bordered={false}
    title="班级出勤情况（今日）"
    style={{
      height: '100%',
    }}
    // extra={
    //   <div className={styles.salesCardExtra}>
    //     {dropdownGroup}
    //     <div className={styles.salesTypeRadio}>
    //       <Select defaultValue="1" style={{ width: 120 }} onChange={handleChange}>
    //         <Option value="1">一年级</Option>
    //         <Option value="2">二年级</Option>
    //         <Option value="3">三年级</Option>
    //         <Option value="4">四年级</Option>
    //         <Option value="5">五年级</Option>
    //       </Select>
    //     </div>
    //   </div>
    // }
  >
    <Row gutter={68}>
      <Col
        sm={12}
        xs={24}
        style={{
          marginBottom: 24,
        }}
      >
        <NumberInfo
          subTitle={
            <span>
              学生总数
              <Tooltip title="指标说明">
                <InfoCircleOutlined
                  style={{
                    marginLeft: 8,
                  }}
                />
              </Tooltip>
            </span>
          }
          gap={8}
          total={numeral(100).format('0,0')}
          status="up"
          subTotal={1}
        />
        <TinyArea xField="x" height={45} forceFit yField="y" smooth data={visitData2} />
      </Col>
      <Col
        sm={12}
        xs={24}
        style={{
          marginBottom: 24,
        }}
      >
        <NumberInfo
          subTitle={
            <span>
              请假人数
              <Tooltip title="指标说明">
                <InfoCircleOutlined
                  style={{
                    marginLeft: 8,
                  }}
                />
              </Tooltip>
            </span>
          }
          total={5}
          status="down"
          subTotal={0}
          gap={8}
        />
        <TinyArea xField="x" height={45} forceFit yField="y" smooth data={visitData2} />
      </Col>
    </Row>
    <Column {...config} />
    {/* <Table
      rowKey={(record) => record.index}
      size="small"
      columns={columns}
      dataSource={searchData}
      pagination={{
        style: {
          marginBottom: 0,
        },
        pageSize: 5,
      }}
    /> */}
  </Card>
);

export default TopSearch;
